<template>
    <el-dialog v-model="visible" :title="title" width="30%" @closed="resetForm" :close-on-press-escape="false">
        <el-form :model="obj" :rules="rules" label-position="left" label-width="100px" label-suffix="：" ref="elFormRef">
            <el-form-item label="编号" prop="id" style="display: none"/>
            <el-form-item label="分组名称" prop="groupName">
                <el-input v-model="obj.groupName"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <template v-if="type===0">
                <el-button type="primary" @click="submitAdd">确认添加</el-button>
            </template>
            <template v-else>
                <el-button type="primary" @click="submitUpdate">保存变更</el-button>
            </template>
        </template>
    </el-dialog>
</template>

<script>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {ElMessage} from "element-plus";
import {addContactsGroup, updateContactsGroup} from "../../../../network/sys/contacts-group";

export default {
    name: "ContactsGroupForm",
    data(){
        return{
            type: 0,
            title: ''
        }
    },
    emits: ['refresh-data'],
    setup(props,{emit}){
        const visible = ref(false);
        const elFormRef = ref(null);
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const validateGroupName = (rule,value,callback)=>{
            globalProperties.$store.state.userContactsGroup.forEach(e=>{
                if(e.groupName === value && e.id !== form.obj){
                    callback(new Error('已存在有相同名称的组'))
                }
            })
            callback();
        }
        const form = reactive({
            obj: {
                id: null,
                groupName: null,
                empId: globalProperties.$store.state.loginUser.id
            },
            rules:{
                groupName:[
                    {required: true,message: '请输入分组名称',trigger: 'blur'},
                    {validator: validateGroupName,trigger: 'blur'}
                ],
                empId: [
                    {required: true,message: '用户编号未填',trigger: 'blur'}
                ]
            },
            setContactsGroup({id,groupName}){
                form.obj.id = id;
                form.obj.groupName = groupName;
            },
            resetForm(){
                elFormRef.value.resetFields();
                elFormRef.value.clearValidate();
            },
            submitAdd(){
                elFormRef.value.validate((valid)=>{
                    if(valid){
                        addContactsGroup(form.obj).then(vo=>{
                            globalProperties.$response.handle({
                                data: vo,
                                success: '添加成功',
                                successFn: ()=>{
                                    visible.value = false;
                                    emit('refresh-data');
                                },
                                log: '添加结果'
                            })
                        })
                    }else{
                        ElMessage.error('添加失败，表单验证错误！');
                    }
                })
            },
            submitUpdate(){
                elFormRef.value.validate(valid=>{
                    if(valid){
                        updateContactsGroup(form.obj).then(vo=>{
                            globalProperties.$response.handle({
                                data: vo,
                                success: '修改成功',
                                successFn:()=>{
                                    visible.value = false;
                                    emit('refresh-data');
                                },
                                log: '修改结果'
                            })
                        })
                    }else{
                        ElMessage.error('添加失败，表单验证错误！');
                    }
                })
            }
        })

        return {
            ...toRefs(form),
            elFormRef,
            visible
        }
    },
}
</script>

<style scoped>

</style>